﻿@page "/datetime-picker"

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["Description"]</h4>

<DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
    <DateTimePicker ViewMode="DatePickerViewMode.DateTime"
                    Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
        <TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
    </DateTimePicker>
    <ConsoleLogger @ref="TimePickerLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <section ignore>
        <GroupBox Title="@Localizer["Feature"]">
            <div class="row g-3 form-inline text-end">
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowLunar"]" ShowLabel="true" @bind-Value="_showLunar" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowSolarTerm"]" ShowLabel="true" @bind-Value="_showSolarTerm" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowFestivals"]" ShowLabel="true" @bind-Value="_showFestivals" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowHolidays"]" ShowLabel="true" @bind-Value="_showHolidays" />
                </div>
            </div>
        </GroupBox>
        <div class="mt-3">
            <Pre>builder.Services.AddBootstrapHolidayService();</Pre>
        </div>
    </section>
    <DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm" ShowFestivals="_showFestivals" ShowHolidays="_showHolidays" />
    <ConsoleLogger @ref="NormalLogger" class="mt-3" />
    <section ignore>
        <Tips class="mt-3">
            <p>@((MarkupString)Localizer["FeatureIntro"].Value)</p>
            <ul class="ul-demo mt-3">
                <li>@((MarkupString)Localizer["FeatureShowLunarIntro"].Value)</li>
                <li>@((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)</li>
                <li>@((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)</li>
                <li>@((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)</li>
            </ul>
            <div>@((MarkupString)Localizer["FeatureFestivalIntro"].Value)</div>
        </Tips>
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
    <ValidateForm Model="this">
        <div class="row g-3">
            <div class="col-12 col-sm-auto">
                <DateTimePicker @bind-Value="@ValidateFormValue" />
            </div>
            <div class="col-12 col-sm-auto align-self-end">
                <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk"></Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowIconTitle"]" Introduction="@Localizer["ShowIconIntro"]" Name="ShowIcon">
    <DateTimePicker TValue="DateTimeOffset?" ShowIcon="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset">
    <DateTimePicker @bind-Value="DateTimeOffsetValue" />
</DemoBlock>

<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
    <div class="row g-3">
        <div class="col-sm-6">
            <DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="dd/MM/yyyy" />
        </div>
        <div class="col-sm-6">
            <input class="form-control" @bind="@BindValueString" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["IsEditableTitle"]" Introduction="@Localizer["IsEditableIntro"]" Name="IsEditable">
    <div class="row g-3">
        <div class="col-sm-6">
            <DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="yyyy-MM-dd" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode">
    <section ignore>@((MarkupString)Localizer["ViewModeTip"].Value)</section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimePicker @bind-Value="YearValue" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker @bind-Value="MonthValue" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker @bind-Value="DateValue" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" DateFormat="yyyy-MM-dd" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker @bind-Value="DateTimeValue" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" DateTimeFormat="yyyy-MM-dd HH:mm:ss" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue">
    <section ignore>@((MarkupString)Localizer["NullValueTip"].Value)</section>
    <div class="row g-3">
        <div class="col-12 col-sm-8">
            <DateTimePicker @bind-Value="@BindNullValue" />
        </div>
        <div class="col-12 col-sm-4">
            <Display TValue="string" Value="@GetNullValueString" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["ShowLabelTip"].Value)
    </section>
    <DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@ShowLabelValue" />
</DemoBlock>

<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="IsDisabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimePicker IsDisabled="IsDisabled" Value="DateTime.Today" />
        </div>
        <div class="col-12 col-sm-6">
            <Switch @bind-Value="@IsDisabled" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar">
    <DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" />
</DemoBlock>

<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue">
    <DateTimePicker @bind-Value="@AllowValue"
                    MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
                    MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["BlockAutoCloseDesc"].Value)
    </section>
    <DateTimePicker @bind-Value="@AutoCloseValue" AutoClose="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
                <DateTimePicker TValue="DateTime" ShowIcon="false" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <DateTimePicker TValue="DateTime" />
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
                <DateTimePicker TValue="DateTime" ShowIcon="false" />
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DayTemplateTitle"]" Introduction="@Localizer["DayTemplateIntro"]" Name="DayTemplate">
    <DateTimePicker TValue="DateTimeOffset?" CustomClass="custom-picker">
        <DayTemplate>
            <span class="custom-cell">
                <span>@context.Day</span>
                <span class="@GetMarkByDay(context)"></span>
            </span>
        </DayTemplate>
    </DateTimePicker>
</DemoBlock>

<DemoBlock Title="@Localizer["DisableDayCallbackTitle"]" Introduction="@Localizer["DisableDayCallbackIntro"]" Name="OnDisabledDayCallback">
    <section ignore>
        <Tips>
            @((MarkupString)Localizer["DisableDayCallbackTip"].Value)
        </Tips>
        <GroupBox Title="@Localizer["DisableOptions"]">
            <div class="row g-3 form-inline text-end">
                <div class="col-12 col-sm-6 col-md-auto">
                    <Switch DisplayText="@Localizer["DisableWeekend"]" ShowLabel="true" @bind-Value="_disableWeekend" OnValueChanged="OnDisabledDaysChanged" />
                </div>
                <div class="col-12 col-sm-6 col-md-auto">
                    <Switch DisplayText="@Localizer["DisableToday"]" ShowLabel="true" @bind-Value="_disableToday" OnValueChanged="OnDisabledDaysChanged" />
                </div>
            </div>
        </GroupBox>
    </section>
    <div class="row form-inline g-3">
        <div class="col-12 col-sm-6">
            <DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackAllowNullDisplayText"]"
                            ShowLabel="true" @bind-Value="@_disabledNullValue" @ref="_picker1"
                            OnGetDisabledDaysCallback="OnGetDisabledDaysCallback" DisplayDisabledDayAsEmpty="true">
            </DateTimePicker>
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackNotAllowNullDisplayText"]"
                            ShowLabel="true" @bind-Value="@_disabledValue" @ref="_picker2"
                            OnGetDisabledDaysCallback="OnGetDisabledDaysCallback">
            </DateTimePicker>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
